<template>
	<el-container>
		<el-aside width="250px">
			<el-container>
				<el-main class="nopadding">
					<blCategoryTree model="PluginMarket" title="插件类别" @node-click="groupClick" />
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" @click="drawer = true" icon="Plus">
						新增插件
					</el-button>
					<el-input v-model="search.keyword" placeholder="插件名称/功能" clearable />
					<el-button type="primary" icon="Search" @click="upsearch">
						查询
					</el-button>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">

					</div>
				</div>
			</el-header>
			<el-main class="nopadding">
				<ta-table-card hideAdd rowHeight="170px" ref="tableRef" :pageSize="20"
					:apiObj="$API.system.pluginMarket.list">
					<template #default="{ item }">
						<div class="card-box">
							<div class="title">
								<div class="left">
									<span class="icon-box">
										<template v-if="item.plugin_icon">
											<img referrerpolicy="no-referrer" style="height: 32px;width: 32px;"
												:src="item.plugin_icon" alt="">
										</template>
										<el-icon v-else size="22" color="#fff" style="background-color: #3370ff;">
											<Eleme />
										</el-icon>
									</span>
									<div class="name-box">
										<div class="name">{{item.plugin_display_name}}</div>
										<span>创建者: admin</span>
									</div>
								</div>
								<div class="delete-button">
									<span class="el-tag el-tag--primary el-tag--light blue-tag" style="height: 22px;">
										<span class="el-tag__content">{{item.plugin_type}}</span>
									</span>
								</div>
							</div>
							<div class="content">{{item.plugin_description}}</div>
							<div style="display: flex;align-items: flex-end; flex: 1;">
								<div style="color: rgba(32, 41, 69, 0.62);">
									最近编辑 {{item.updated_at}}
								</div>
							</div>
						</div>
					</template>
				</ta-table-card>
			</el-main>
		</el-container>
	</el-container>
	<el-drawer v-model="drawer" title="创建应用" :modal="false" size="100%" direction="ttb">
		<create />
	</el-drawer>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import create from './create.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 组件引用
	const tableRef = ref(null)

	// 响应式数据
	const drawer = ref(false)
	const search = reactive({
		keyword: ""
	})

	const listApiObj = reactive({
		...proxy.$API.system.pluginMarket.list
	})
	const groups = ref([])

	const TreeApi = proxy.$API.system.category.tree

	// 新增类目
	const TreeDicPlus = () => {
		visible.value = !visible.value
	}

	const groupClick = (data) => {
		const params = {
			category_id: data.id
		}
		tableRef.value?.upData(params)
	}

	const upsearch = () => {
		tableRef.value?.upData(search)
	}

	onMounted(async () => {
		//let array = await TreeApi.get()
		//groups.value = array.data
	})
</script>

<style scoped lang="scss">
	.left-panel {
		display: flex;
		gap: 10px;
	}

	.card-box {
		font-size: 14px;
		position: relative;
		min-height: 130px;
		min-width: var(--card-min-width);
		border-radius: 8px;
		/*border: 1px solid #eee;
		padding: 15px;
		margin-bottom: 20px;

		*/
		border: none;

		transition: .3s;
		display: flex;
		flex-direction: column;
	}

	.card-box:hover {
		/*box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, .12);*/
		cursor: pointer;
	}

	.icon-box {
		border-radius: 6px;

		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
	}

	.title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// align-items: center;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon-box {
				margin-right: 10px;
			}

			.name-box {
				.name {
					font-size: 14px;
					color: #333;
				}

				span {
					color: #999;
					font-size: 12px;
				}
			}
		}
	}

	.content {
		line-height: 22px;
		font-size: 14px;
		color: #777;
		margin-top: 10px;
	}

	.card-add {
		display: flex;
		height: 100%;
		padding-bottom: 20px;

		.add-box {
			cursor: pointer;
			display: flex;
			height: 100%;
			width: 100%;
			align-items: center;
			justify-content: center;
			border: 1px dashed #dee0e3;
			background-color: #eff0f1;
			border-radius: 8px;
		}
	}
</style>
